<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>正则表达式验证URL</title>
  </head>
  <body></body>
  <script>
    // 标准格式：[协议类型]://[服务器地址]:[端口号]/[资源层级UNIX文件路径][文件名]?[查询]#[片段ID]
    // 完整格式：[协议类型]://[访问资源需要的凭证信息]@[服务器地址]:[端口号]/[资源层级UNIX文件路径][文件名]?[查询]#[片段ID]
    let str = "http://www.baidu.com/index.html?x=1&from=ww#vido";

    let reg =
      /^(?:http|https|ftp):\/\/(([\w]+\.)+[a-z0-9]+)((?:\/[^/?#]*)+)?(\?[^#]+)?(#.+)?$/i;
    console.log(reg.exec(str));

    // URL 格式
    // 1. 协议： http/https/ftf      可有可无
    // 2. 域名： 数字、字母、_
    // www.baidu.com

    // 3. 请求路径        可有可无
    // /index.html
    //  /index

    // 4. 问号传参      可有可无
    // ?xx=xxx&xxx=xx

    // 5. 哈希值
    // #xxx
  </script>
</html>
